<%--
  @desc: 系统字典列表
  @author: chenw
  @create: 2014-5-26 AM 11:44
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<link href="<c:url value='/resource/css/zTreeStyle/zTreeStyle.css'/>" rel="stylesheet" type="text/css" media="screen"/>
<style type="text/css">
    .keywords {
        width: 250px;
        font-family: '微软雅黑', sans-serif, serif;
    }

    .dict-tree {
        float: left;
        width: 250px;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: 1px solid #D8D1D1;
    }
    .dict-show {
        border-top: 1px solid #D8D1D1;;
        float: left;
    }
</style>
<div class="pageHeader">
    <div class="searchBar">
        <ul>
            <li style="float: left;line-height: 25px;">
                <label style="width:50px;">关键字：</label> <input name="keywords" type="text" value="" placeholder="请输入字典名进行检索"
                    class="keywords" id="keywords"/>
            </li>
            <li>
                <div class="buttonActive" style="margin-left: 5px;">
                    <div class="buttonContent">
                        <button onclick="findDict()">查找字典</button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="pageContent" style="padding-top: 1px;">
    <div class="panelBar">
        <ul class="toolBar" style="float: left;display: inline-block;">
            <li><a class="add" href="<c:url value='/sys/dict/new/{sel_id}'/>" target="dialog" width="520" height="280" mask="true" resizable="false" maxable="false"
                    title="新增字典"><span>新增</span></a></li>
            <li class="line"></li>
            <li><a class="delete" href="<c:url value='/sys/dict/del/{sel_id}'/>" target="ajaxDel" title="是否确认删除当前字典？"
                    callback="callbackDelDictRefreshPage"><span>删除</span></a></li>
            <li class="line"></li>
        </ul>
    </div>
    <div class="dict-content">
        <div class="dict-tree" layoutH="65">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="dict-list" id="dict_list" layoutH="310"></div>
        <div class="dict-show" id="dict_show"></div>
    </div>
</div>
<script type="text/javascript" src="<c:url value="/resource/js/jquery.form.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resource/js/ztree/jquery.ztree.core-3.5.js"/>"></script>
<script type="text/javascript">
    //树对象
    var zTree;
    //筛选的节点数组
    var nodeList = [];
    //最后一次搜索内容
    var lastValue = "";
    var dictName = "";
    //zTree基本设置
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            //字体样式格式化
            fontCss: function (treeId, treeNode) {
                return (!!treeNode.highlight) ? {color: "red", "font-weight": "bold"} : {color: "#333", "font-weight": "normal"};
            }
        },
        callback: {
            onClick: function (event, treeId, treeNode) {
                //重载右边列表信息 treeNode.id为字典id
                $("#dict_list").loadUrl("<c:url value='/sys/dict/sub/#'/>".replace("#", treeNode.id));
                //获得树对象
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                //单点展开树节点
                zTree.expandNode(treeNode);
                //展示当前节点的信息
                showDetail(treeNode.id);
            }
        }
    };
    $(document).ready(function () {
        var dict_list = $("#dict_list");
        var zNodes = eval('(${node})');
        //初始化树结构
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        //初始化右边列表
        dict_list.loadUrl("<c:url value='/sys/dict/sub/0'/>");
        //获取树对象
        zTree = $.fn.zTree.getZTreeObj("treeDemo");
        $("#dict_show").css("width", dict_list.width() -
                252);
    });
    function callbackDelDictRefreshPage(resp) {
        if (resp && resp.succ) {
            alertMsg.info("字典数据删除成功！");
            navTab.reloadFlag('page_sys_dict_list')
        } else {
            alertMsg.info(resp.msg + "!");
        }
    }
    //查找字典并高亮
    function findDict() {
        //搜索的value值并去空格
        dictName = $.trim($("#keywords").val());
        //如果搜索内容与上次一样则不变
        if (lastValue == dictName)
            return;
        //内容为空 所有字体变为正常
        if (dictName == "")
            updateNodes(false);
        else {
            //清空树高亮
            clearTree();
            //查找高亮字体
            nodeList = zTree.getNodesByParamFuzzy("name", dictName, null);
            //高亮并暂开
            updateNodes(true);
        }
        //保存最后一次搜索
        lastValue = dictName;
    }
    /**
     * 是否高亮
     * @param isHeightLight true or false
     */
    function updateNodes(isHeightLight) {
        for (var i = 0; i < nodeList.length; i++) {
            //高亮  true 高亮 false 普通字体
            nodeList[i].highlight = isHeightLight;
            //更新节点
            zTree.updateNode(nodeList[i]);
            //当前节点的父节点为闭合才展开  思路:找到所有的带关键字的节点并展开他的父节点可查看
            if (isHeightLight && nodeList[i].getParentNode().open == false)
                zTree.expandNode(nodeList[i].getParentNode());
        }
    }
    //清除树高亮字体
    function clearTree() {
        //节点集合
        nodeList = zTree.getNodesByParamFuzzy("name", "", null);
        updateNodes(false);
    }
</script>